<script setup lang="ts">
import TableComponent from './components/TableComponent.vue'
</script>

<template>
  <header class="grid grid-cols-3 w-full justify-center items-center p-4 shadow-md mb-8">
    <div class="justify-self-start flex items-center space-x-2 text-indigo-900">
      <h1>WayTale</h1>
    </div>
    <div class="w-full flex space-x-4 justify-center"></div>
  </header>

  <main class="px-8">
    <TableComponent
      :tableHeaders="['Name', 'Age', 'Country']"
      :tableData="[
        ['Alice Johnson', 27, 'Australia'],
        ['Michael Brown', 32, 'Germany'],
        ['Emily Davis', 29, 'France'],
        ['David Wilson', 31, 'Spain'],
        ['Sophia Martinez', 26, 'Italy']
      ]"
      :alternateRowColor="'#e6f7ff'"
      :specificColumnWidth="'auto'"
      :showButtonsColumn="true"
    />
  </main>
</template>
